<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf">公司名称</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                      v-if="companySeen.name">
                      {{company.name}}
                    </span>
                    <el-input 
                      ref="companyNameInput"
                      v-if="!companySeen.name" 
                      type="textarea"
                      :autosize="{ minRows: 1, maxRows: 9999}"
                      v-model="company.name"
                      @blur="handleUpdateCompanyName">
                    </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyNameUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyName">修改</el-button>
                  </td>
                  <td class="el-table__cell is-leaf">公司英文名</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                      v-if="companySeen.nameEn">
                      {{ company.nameEn }}
                    </span>
                    <el-input 
                      ref="companyNameEnInput"
                      v-if="!companySeen.nameEn" 
                      type="textarea"
                      :autosize="{ minRows: 1, maxRows: 9999}"
                      v-model="company.nameEn"
                      @blur="handleUpdateCompanyNameEn">
                    </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyNameEnUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyNameEn">修改</el-button></td>
                  <td class="el-table__cell is-leaf">业务类型</td>
                  <td class="el-table__cell is-leaf">{{ company.industry }}</td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">员工数</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                      v-if="companySeen.employeeNum">
                      {{ company.employeeNum }}
                    </span>
                    <el-input 
                      ref="companyEmployeeNumInput"
                      v-if="!companySeen.employeeNum" 
                      type="textarea"
                      :autosize="{ minRows: 1, maxRows: 9999}"
                      v-model="company.employeeNum"
                      @blur="handleUpdateCompanyEmployeeNum">
                    </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyEmployeeNumUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyEmployeeNum">修改</el-button>
                  </td>
                  <td class="el-table__cell is-leaf">收入</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                      v-if="companySeen.income">
                      {{ company.income }}
                    </span>
                    <el-input 
                      ref="companyIncomeInput"
                      v-if="!companySeen.income" 
                      type="textarea"
                      :autosize="{ minRows: 1, maxRows: 9999}"
                      v-model="company.income"
                      @blur="handleUpdateCompanyIncome">
                    </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyIncomeUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyIncome">修改</el-button>
                  </td>
                  <td class="el-table__cell is-leaf">成立时间</td>
                  <td class="el-table__cell is-leaf">{{ company.fundationTime }}</td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">品牌介绍</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                      v-if="companySeen.brandIntro">
                      {{ company.brandIntro }}
                    </span>
                    <el-input 
                      ref="companyBrandIntroInput"
                      v-if="!companySeen.brandIntro" 
                      type="textarea"
                      :autosize="{ minRows: 1, maxRows: 9999}"
                      v-model="company.brandIntro"
                      @blur="handleUpdateCompanyBrandIntro">
                    </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyBrandIntroUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyBrandIntro">修改</el-button>
                  </td>
                  <td class="el-table__cell is-leaf">公司简介</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                      v-if="companySeen.shortIntro">
                      {{ company.shortIntro }}
                    </span>
                    <el-input 
                      ref="companyShortIntroInput"
                      v-if="!companySeen.shortIntro" 
                      type="textarea"
                      :autosize="{ minRows: 1, maxRows: 9999}"
                      v-model="company.shortIntro"
                      @blur="handleUpdateCompanyShortIntro">
                    </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyShortIntroUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyShortIntro">修改</el-button>
                  </td>
                  <td class="el-table__cell is-leaf">荣誉资质</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                      v-if="companySeen.qualification">
                      {{ company.qualification }}
                    </span>
                    <el-input 
                      ref="companyQualificationInput"
                      v-if="!companySeen.qualification" 
                      type="textarea"
                      :autosize="{ minRows: 1, maxRows: 9999}"
                      v-model="company.qualification"
                      @blur="handleUpdateCompanyQualification">
                    </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyQualificationUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyQualification">修改</el-button>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">公司介绍</td>
                </tr>
                <tr>
                  <td colspan="7" class="el-table__cell is-leaf">
                    <span 
                      v-if="companySeen.intro">
                      {{ company.intro }}
                    </span>
                    <myeditor v-if="!companySeen.intro" v-model="company.intro" />
                    <!--<el-input 
                      ref="companyNameInput"
                      v-if="!companySeen.intro" 
                      type="textarea"
                      :autosize="{ minRows: 1, maxRows: 9999}"
                      v-model="company.intro"
                      @blur="handleUpdateCompanyIntro">
                    </el-input>-->
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyIntroUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyIntro">修改</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-odometer"></i> 联系信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf">联系电话</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                        v-if="companySeen.phone">
                        {{ company.phone }}
                      </span>
                      <el-input 
                        ref="companyPhoneInput"
                        v-if="!companySeen.phone" 
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 9999}"
                        v-model="company.phone"
                        @blur="handleUpdateCompanyPhone">
                      </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyPhoneUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyPhone">修改</el-button>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">email</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                        v-if="companySeen.email">
                        {{ company.email }}
                      </span>
                      <el-input 
                        ref="companyEmailInput"
                        v-if="!companySeen.email" 
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 9999}"
                        v-model="company.email"
                        @blur="handleUpdateCompanyEmail">
                      </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyEmailUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyEmail">修改</el-button>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">公司地址</td>
                  <td class="el-table__cell is-leaf">
                    <span 
                        v-if="companySeen.address">
                        {{ company.address }}
                      </span>
                      <el-input 
                        ref="companyAddressInput"
                        v-if="!companySeen.address" 
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 9999}"
                        v-model="company.address"
                        @blur="handleUpdateCompanyAddress">
                      </el-input>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button 
                      ref="companyAddressUpdateBtn" 
                      type="success" 
                      plain 
                      icon="el-icon-edit" 
                      size="mini" 
                      :disabled="isLock"
                      @click="handleUpdateCompanyAddress">修改</el-button>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">微信</td>
                  <td class="el-table__cell is-leaf">
                    <wechatImg :company="company" />
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">联系图</td>
                  <td class="el-table__cell is-leaf">
                    <contactImg :company="company" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-pie-chart"></i> 宣传信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf">公司logo</td>
                  <td class="el-table__cell is-leaf"><logoImg :company="company" /></td>
                  <td class="el-table__cell is-leaf">
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">宣传视频</td>
                  <td class="el-table__cell is-leaf">
                    <video
                      ref="videoRef"
                      :src="videoUrl"
                      width="350"
                      height="300"
                      controls>
                    </video>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <el-button
                      type="info"
                      plain
                      icon="el-icon-upload"
                      size="mini"
                      @click="handleImport"
                    >修改</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".mp4, .avi, .rmvb"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-error="handleUploadError"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <p>仅允许导入mp4、avi、rmvb格式的视频文件</p>
          <p>大小不超过 <b style="color: #f56c6c">500MB</b></p>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyInfo, updateCompany } from "@/api/company/info";
import { getToken } from "@/utils/auth";
import {preventReClick } from '@/utils/directive';

export default {
  name: "Company",
  components: { 
    wechatImg: () => import('./wechatImg'),
    logoImg: () => import('./logoImg'),
    contactImg: () => import('./contactImg'),
  },
  data() {
    return {
      isLock: false,
      companySeen: {
        name: true,
        nameEn: true,
        industry: true,
        fundationTime: true,
        employeeNum: true,
        income: true,
        intro: true,
        phone: true,
        email: true,
        address: true,
        wechat: true,
        logo: true,
        video: true,
        brandIntro: true,
        shortIntro: true,
        qualification: true,
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/company/uploadVideo"
      },
      company: {
        name: undefined,
        nameEn: undefined,
        industry: undefined,
        fundationTime: undefined,
        employeeNum: undefined,
        income: undefined,
        intro: undefined,
        phone: undefined,
        email: undefined,
        address: undefined,
        wechat: undefined,
        logo: undefined,
        video: undefined,
        brandIntro: undefined,
        shortIntro: undefined,
        qualification: undefined,
      },
    }
  },

  computed: {
    videoUrl() { 
      return `${process.env.VUE_APP_BASE_API}${this.company.video}`;
    }
  },

  created() {
    this.getCompanyData();
  },    

  methods: {
    getCompanyData() {
      getCompanyInfo().then(response => {
        this.company = response.data;
      });
    },

    editCropper() {
      this.open = true;
    },

    handleUpdateCompanyName() {
      this.isLock = true;
      if(this.companySeen.name == true) {
        this.companySeen.name = false;
      } else {
        updateCompany({'fieldName':'name', 'value':this.company.name});
        this.companySeen.name = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyNameEn() {
      this.isLock = true;
      if(this.companySeen.nameEn == true) {
        this.companySeen.nameEn = false;
      } else {
        updateCompany({'fieldName':'nameEn', 'value':this.company.nameEn});
        this.companySeen.nameEn = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyEmployeeNum() {
      this.isLock = true;
      if(this.companySeen.employeeNum == true) {
        this.companySeen.employeeNum = false;
      } else {
        updateCompany({'fieldName':'employeeNum', 'value':this.company.employeeNum});
        this.companySeen.employeeNum = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyIncome() {
      this.isLock = true;
      if(this.companySeen.income == true) {
        this.companySeen.income = false;
      } else {
        updateCompany({'fieldName':'income', 'value':this.company.income});
        this.companySeen.income = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyIntro() {
      this.isLock = true;
      if(this.companySeen.intro == true) {
        this.companySeen.intro = false;
      } else {
        updateCompany({'fieldName':'intro', 'value':this.company.intro});
        this.companySeen.intro = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyPhone() {
      this.isLock = true;
      if(this.companySeen.phone == true) {
        this.companySeen.phone = false;
      } else {
        updateCompany({'fieldName':'phone', 'value':this.company.phone});
        this.companySeen.phone = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyEmail() {
      this.isLock = true;
      if(this.companySeen.email == true) {
        this.companySeen.email = false;
      } else {
        updateCompany({'fieldName':'email', 'value':this.company.email});
        this.companySeen.email = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyAddress() {
      this.isLock = true;
      if(this.companySeen.address == true) {
        this.companySeen.address = false;
      } else {
        updateCompany({'fieldName':'address', 'value':this.company.address});
        this.companySeen.address = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyBrandIntro() {
      this.isLock = true;
      if(this.companySeen.brandIntro == true) {
        this.companySeen.brandIntro = false;
      } else {
        updateCompany({'fieldName':'brandIntro', 'value':this.company.brandIntro});
        this.companySeen.brandIntro = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyShortIntro() {
      this.isLock = true;
      if(this.companySeen.shortIntro == true) {
        this.companySeen.shortIntro = false;
      } else {
        updateCompany({'fieldName':'shortIntro', 'value':this.company.shortIntro});
        this.companySeen.shortIntro = true;
      }
      this.isLock=false;
    },
    handleUpdateCompanyQualification() {
      this.isLock = true;
      if(this.companySeen.qualification == true) {
        this.companySeen.qualification = false;
      } else {
        updateCompany({'fieldName':'qualification', 'value':this.company.qualification});
        this.companySeen.qualification = true;
      }
      this.isLock=false;
    },
    handleImport() {
      this.upload.title = "视频上传";
      this.upload.open = true;
    },
    // 上传失败
    handleUploadError(err) {
      this.$modal.msgError("上传文件失败，请重试");
      this.$modal.closeLoading();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.company.video = response.videoUrl;
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "修改结果", { dangerouslyUseHTMLString: true });
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>

<style scoped lang="scss">
 /* 去掉表格单元格边框 */
/*.el-table th{
    border:none;
  }
.el-table td,.el-table th.is-leaf {
  border:none;
}*/
 /* 表格最外边框 */
/*.el-table--border, .el-table--group{
  border: none;
}*/
 /* 头部边框 */
/*.el-table thead tr th.is-leaf{
  border-bottom: 1px solid #EBEEF5;
  border-right: none;
}*/
/* 表格最外层边框-底部边框 */
/*.el-table--border::after, .el-table--group::after{
  width: 0;
}
.el-table::before{
  width: 0;
}
.el-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}*/

img {
  max-width: 90%;
  height: auto;
}
</style>
